<template>
  <el-radio-group v-model="selected" @change="input" :disabled="$attrs.disabled">
    <template v-if="optionType==='button'">
       <el-radio-button v-for="(item, index) in option" :key="index" :label="item.value">{{item.label}}</el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="(item, index) in option" :key="index" :label="item.value">{{item.label}}</el-radio>
    </template>
  </el-radio-group>
</template>
<script>
  import {
    getDictData,
    sourceTestList
  } from '@/api/custom/formDesigner'
  export default {
    data() {
      return {
        option: [], //选项
        selected: '' //选择值
      }
    },
    props: ['dataType', //数据类型
      'tableName', //表名
      'fieldName', //字段名
      'saveFieldName',
      'dictName', //字典名
      'options', //静态选项
      'optionType', //单选框显示类型
      'value' //组件值
    ],
    watch: {
      value(val) {
        this.selected = /^\d+$/.test(val) ? Number(val) : val;
      },
      options() {
        if (this.dataType === 'static') {
          this.option = this.options
        }
      },
      dataType: {
        handler() {
          let val = this.dataType
          if (val === 'static') { //静态数据
            this.option = this.options
          } else if (val === 'dictionary') { //字典数据
            this.option = []
            if (this.dictName !== '') {
              this.getDictDatas() //获取字典数据
            }
          } else { //动态数据
              this.getDataSourceOption() //获取列数据
          }
          let valstr = this.value;
          this.selected = /^\d+$/.test(valstr) ? Number(valstr) : valstr;
        },
        immediate: true
      },
      dictName: {
        handler() {
          this.option = []
          if (this.dictName !== '') {
            this.getDictDatas() //获取字典数据
          }
        }
      },
      fieldName: {
        handler() {
            this.getDataSourceOption() //获取列数据
        }
      },
      saveFieldName: {
        handler() {
            this.getDataSourceOption() //获取数据源数据
        }
      }
    },
    methods: {
      input(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      },
      async getDataSourceOption(){
        this.option = []
        if (this.tableName && this.fieldName && this.saveFieldName) {
            const rsp = await sourceTestList(this.tableName)
            if (rsp.code === 0) {
                this.option = rsp.data?.rowMaps.map((item)=>{
                    return {
                        label:item[this.fieldName],
                        value:item[this.saveFieldName]
                    }
                })
            }
        }
      },
      //获取字典数据
      getDictDatas() {
        getDictData({
          dictType: this.dictName
        }).then((res) => {
          if (res.code === 0) {
            res.data.forEach((item) => {
              this.option.push({
                label: item.label,
                value: /^\d+$/.test(item.value) ? Number(item.value) : item.value
              })
            })
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }

</script>
